import React, { useEffect, useState } from 'react'
import SideMenu from '../components/sandbox/SideMenu'
import TopHeader from '../components/sandbox/TopHeader'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './NewsSandBox.css'
import { Layout, Spin } from 'antd';
import NewRoute from '../components/sandbox/NewRoute'
const { Content } = Layout;

export default function NewsSandBox(props) {
    const [is_collapsed, setis_collapsed] = useState(false)
    NProgress.start();
    useEffect(() => {
        NProgress.done();
    }, [props,is_collapsed])
    return (
        <Layout>
            <SideMenu collapsed={is_collapsed}></SideMenu>
            <Layout className="site-layout">
                <TopHeader collapsed={() => setis_collapsed(!is_collapsed)}></TopHeader>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    {/* <Spin size="large" tip="Loading..."> */}
                    <NewRoute></NewRoute>
                    {/* </Spin> */}
                </Content>
            </Layout>
        </Layout>
    )
}
